<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 阻止表单默认提交   onsubmit="return false" -->

    <button class="get">get</button>
    <button class="set">set</button>
    <form action="" method="get" >
        <div class="input-group">
            <label for="user">用户名:</label>
            <!-- disabled="disabled"   页面加载时 => 默认禁用  =>  -->
            <input type="text" id="user" name="user" disabled="disabled" placeholder="请输入..">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd" required="required">
        </div>
        <div class="input-group">
            <span>爱&emsp;好:</span>
            <label><input type="checkbox" name="hobby" checked="checked" value="sing">唱歌</label>
            <label><input type="checkbox" name="hobby" value="dance">跳舞</label>
            <label><input type="checkbox" name="hobby" value="rap">rap</label>
            <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
        </div>
        
        <div class="input-group">
            <label >年龄:</label>
            <select name="age" id="">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021" selected="selected">2021</option>
            </select>
        </div>

        <div class="input-group">
            <label >建议:</label>
            <textarea name="advice"  cols="30" rows="10" maxlength="50"></textarea>
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
<script>

    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var ageSel = document.getElementsByName("age")[0];
    var adviceInp = document.getElementsByName("advice")[0];

    var hobbyList = document.getElementsByName("hobby");

    var submitBtn = document.querySelector("[type='submit']");

    var get = document.getElementsByClassName("get")[0];
    var set = document.getElementsByClassName("set")[0];

    // 元素节点的属性 表单相关

    // 所有表单空间
    // value   获取和设置表单元素value值
    // name    获取和设置表单元素name属性

    // input 相关
    // type    获取和设置表单元素type属性(input )
    // placeholder  获取和设置表单元素placeholder属性

    // input:number
    // min   获取和设置表单元素的min属性 
    // max   获取和设置表单元素的max属性
    // step   获取和设置表单元素的step属性

    // textarea
    // cols   获取和设置表单元素的cols属性
    // rows   获取和设置表单元素的rows属性
    // maxlength   获取和设置表单元素的maxlength属性
    // placeholder   获取和设置表单元素的placeholder属性

    // 状态相关
    // disabled   获取和设置表单元素是否禁用  true:禁用 false(false):不禁用
    // required   获取和设置表单元素是否必填  true:必填 false(false):选填
    // checked    获取和设置表单元素是否被选中(单选框 复选框)  true:选中 false(false):未选中

    get.onclick = function(){
        console.log(userInp.disabled);
        console.log(pwdInp.required);
        console.log(hobbyList[0].checked);
    }

    set.onclick = function(){
        userInp.disabled = false;
        pwdInp.required = false;
        hobbyList[0].checked = hobbyList[0].checked == true ? false :true;
    }




</script>
</html>